
import { Row } from 'element-ui';
<template>
    <div>
        <div class="cz">
            <!-- 基础信息 -->
            <div name="基础信息">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <h3 style="float: left;">进货单号：{{ jhdh }}</h3>
                        <div style="float: right;">
                            <el-button plain>入库</el-button>
                            <el-button plain>退货</el-button>
                            <el-button plain>撤销</el-button>
                            <el-button @click="Guan()" plain>关闭</el-button>
                            <el-button plain>打印</el-button>
                        </div>
                    </div>
                    <!-- 主体 -->
                    <div name="主体">
                        <el-form :inline="true" class="demo-form-inline" ref="form"  label-width="150px">
                            <el-form-item label="序号：">
                                 {{ form.id }}
                            </el-form-item>
                            <el-form-item label="制单时间：">
                                 {{ form.create_time }}
                            </el-form-item>

                            <el-form-item label="进货日期：">
                                 {{ form.buy_date }}
                            </el-form-item>

                            <el-form-item label="供应商：">
                                 {{ form.supply_code }}
                            </el-form-item>

                            <el-form-item label="联系人：">
                                 {{ form.link_man }}
                            </el-form-item>

                            <el-form-item label="联系方式：">
                                 {{ form.link_way }}
                            </el-form-item>

                            <el-form-item label="进货人：">
                                 {{ form.buy_man }}
                            </el-form-item>

                            <el-form-item label="备注：">
                                 {{ form.remark }}
                            </el-form-item>

                            <el-form-item label="单据状态：" >
                                <h4 v-if="form.sure_state === '1'">草稿</h4>
                                <h4 v-else-if="form.sure_state === '2'">待审核</h4>
                                <h4 v-else-if="form.sure_state === '3'">驳回</h4>
                                <h4 v-else-if="form.sure_state === '4'">未入库</h4>
                                <h4 v-else-if="form.sure_state === '5'">部分入库</h4>
                                <h4 v-else-if="form.sure_state === '6'">已完成 </h4>
                                <h4 v-else-if="form.sure_state === '7'">已关闭</h4>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </div>
            <!-- 基础信息 -->

            <!-- 进货明细 -->
            <div name="进货明细">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <h3>进货明细</h3>
                    </div>
                    <!-- 主体 -->
                    <div name="主体">
                        <el-row style="margin-bottom: 10px;">
                        <el-button plain @click="XiaZai2()" >导出</el-button>
                        </el-row>
                        <!-- 主体 -->
                        <div>
                            <el-table :data="BDDate" border ref="myTable" height="250" style="width: 100%">
                                <el-table-column type="selection" width="55">
                                </el-table-column>

                                <el-table-column prop="id" label="序号">
                                </el-table-column>

                                <el-table-column prop="item_name" label="货品名称">
                                </el-table-column>

                                <el-table-column prop="item_code" label="货品编号" width="140">
                                </el-table-column>

                                <el-table-column prop="model_code" label="规格型号">
                                </el-table-column>

                                <el-table-column prop="unit" label="单位">
                                </el-table-column>

                                <el-table-column prop="buy_num" label="货品数量" >
                                </el-table-column>

                                <el-table-column prop="inbill_price" label="进货单价">
                                </el-table-column>

                                <el-table-column prop="buy_price" label="金额">
                                </el-table-column>

                            </el-table>
                        </div>

                    </div>
                </el-card>
            </div>
            <!-- 进货明细 -->
        </div>


    </div>
</template>

<script>
import moment from 'moment';
import $http from '@/http/base.js';
import xlsx from 'xlsx';

export default {
    data() {
        return {
            form: {},
            cxtj:'',
            jhdh:'',
            BDDate:[],
            currenTime:'',
            currenTime1:''
        }
    },
    methods: {
        XiaZai2() {
    const selectedRows = this.$refs.myTable.selection; // 获取选中的行数据
    console.log(selectedRows);
    const data = selectedRows.map(row => {
      return {
        '序号': row.id,
        '货品名称': row.item_name,
        '货品编号': row.item_code,
        '规格型号': row.model_code,
        '单位': row.unit,
        '进货人': row.buy_man,
        '货品数量': row.buy_num,
        '进货单价': row.inbill_price,
        '金额': row.buy_price
      };
    });

    import("xlsx").then(xlsx => {
      const worksheet = xlsx.utils.json_to_sheet(data);
      const workbook = xlsx.utils.book_new();
      xlsx.utils.book_append_sheet(workbook, worksheet, "Sheet1");

      const excelBuffer = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const url = window.URL.createObjectURL(blob);
      
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', '进货详情信息表.xlsx'); // 下载文件的名称
      document.body.appendChild(link);
      link.click();
    });
  },  
        //关闭
        Guan() {
            this.$router.push({
                path: '/WHOM_SelectZB', // 目标路径

            })
        },
        //订单表信息查询
        chaxx() {
            $http
                .get('api/wh_Buy_Order_h/SelectTj?tj=' + this.cxtj)
                .then(res => {
                    this.form=res;
                    console.log('信息：');
                    console.log(res);
                })
                .catch(err => {
                    this.TiShiSB('查询');
                    console.log(err);
                })
        },
        //订单详情表查询
        chaXq() {
            $http
                .get('api/wh_Buy_Order_h/JHXQTjSelect?tj=' + this.cxtj)
                .then(res => {
                    console.log(res);
                    this.BDDate = res;
                })
                .catch(err => {
                    this.TiShiSB('查询');
                    console.log(err);
                })
        },
        //操作提示 --成功
        TiShiCG(xx) {
            this.$message({
                message: xx + '操作成功!',
                type: 'success'
            });
        },
        //操作提示 --警告
        TiShiJG(xx) {
            this.$message({
                message: xx + '失败，请检查数据状态',
                type: 'warning'
            });
        },
        //操作提示 --失败
        TiShiSB(xx) {
            this.$message.error(xx + '操作失败');
        },
        //时间获取 年月日时分秒
        getCurrentTime() {
            const date = new Date();
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2);
            const day = ('0' + date.getDate()).slice(-2);
            const hours = ('0' + date.getHours()).slice(-2);
            const minutes = ('0' + date.getMinutes()).slice(-2);
            const seconds = ('0' + date.getSeconds()).slice(-2);

            this.currenTime = `${year}${month}${day}${hours}${minutes}`;
            this.currenTime1 = `${year}-${month}-${day}`;

        },
        //时间格式变换
        ShiJIan(sj) {
            const dateStr = sj;

            // 创建一个新的 Date 对象来表示这个日期
            const date = new Date(dateStr);

            // 使用 Date 对象的 getXXX() 方法来获取不同部分的日期信息
            // 在这个例子中，我们只需要年、月、日三个信息
            const year = date.getFullYear();
            const month = date.getMonth() + 1;     // 月份从 0 开始，因此需要加 1
            const day = date.getDate();
            const formattedDate = `${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`;
            

        },

    },

    computed: {

    },
    mounted() {
        //页面传值 
        this.jhdh = this.cxtj = this.$route.query.buy_code;
        console.log("传值：" + this.cxtj);
        //订单表信息查询
        this.chaxx();
        //订单详情表查询
        this.chaXq();

    },

}
</script>


<style scoped>
.cz {
    margin-left: 80px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 1000px;
    margin-top: 35px;
}

.box-card1 {
    width: 100%;
}

.kuan1 {
    width: 300px;
}

.kuan2 {
    margin-left: 120px;
}

.dibu {
    position: absolute;
    bottom: 50px;
    width: 100%;
}



.block {
    float: right;

}
</style>
